<template>
	<view class="change-password">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<u-form :model="form" ref="uFormRef" :rules="rules" v-if="type == 1">
			<u-form-item label="原密码" label-width="60" prop="old_password">
				<u-input v-model="form.old_password" placeholder="请输入原密码" type="password"></u-input>
			</u-form-item>

			<u-form-item label="新密码" label-width="60" prop="new_password">
				<u-input v-model="form.new_password" placeholder="请输入新密码" type="password"></u-input>
			</u-form-item>

			<u-form-item label="确认密码" label-width="60" prop="confirm_password">
				<u-input v-model="form.confirm_password" placeholder="请输入确认密码" type="password"></u-input>
			</u-form-item>
		</u-form>

		<u-form :model="form" ref="uFormRef" :rules="rules" v-if="type == 2">
			<u-form-item label="手机号" label-width="60" prop="mobile">
				<u-input v-model="form.mobile" placeholder="请输入注册时预留手机号" type="number"></u-input>
			</u-form-item>

			<u-form-item label="验证码" label-width="60" prop="verify_code">
				<u-input v-model="form.verify_code" placeholder="请输入验证码">
					<template #suffix>
						<up-code ref="uCodeRef" @change="codeChange" :seconds="seconds" changeText="X秒后重新获取"></up-code>
						<up-button @tap="getCode" :text="tips" type="success" size="mini"></up-button>
					</template>
				</u-input>
			</u-form-item>

			<u-form-item label="新密码" label-width="60" prop="new_password">
				<u-input v-model="form.new_password" placeholder="请输入新密码" type="password"></u-input>
			</u-form-item>
		</u-form>

		<view class="btn" @click="submit">立即修改</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '修改登录密码',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		type: 2, // 1原密码修改,2验证码修改
		loading: false,
		form: {
			mobile: '',
			verify_code: '',
			old_password: '',
			new_password: '',
			confirm_password: '',
			role: cache.get('role', false),
		},
		tips: '获取验证码',
		seconds: 60,
		rules: {
			mobile: [{
					type: 'string',
					required: true,
					message: '请输入手机号',
					trigger: ['blur', 'change'],
				},
				{
					// 自定义验证函数，见上说明
					validator: (rule, value, callback) => {
						// 上面有说，返回true表示校验通过，返回false表示不通过
						// uni.$u.test.mobile()就是返回true或者false的
						return uni.$u.test.mobile(value);
					},
					message: '手机号码不正确',
					// 触发器可以同时用blur和change
					trigger: ['change', 'blur'],
				}
			],
			'verify_code': {
				type: 'string',
				required: true,
				message: '请输入验证码',
				trigger: ['blur', 'change'],
			},
		}
	});

	// 表单引用  
	const uFormRef = ref(null);
	const uCodeRef = ref(null);

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function getCode() {
		if (uCodeRef.value.canGetCode) {
			if (!util.mobile(state.form.mobile)) {
				return;
			}
			// 向后端请求验证码
			uni.showLoading({
				title: '正在获取验证码',
			});
			request.get("login/smsSend", state.form).then(res => {
				console.log('获取验证码', res);
				if (res.code == 1) {
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被start()方法中的提示覆盖
						uni.$u.toast(res.msg);
						// 通知验证码组件内部开始倒计时
						uCodeRef.value.start();
					}, 2000);
				} else {
					util.showTip(res.msg);
				}
			})
		} else {
			uni.$u.toast('倒计时结束后再发送');
		}
	}

	const codeChange = (text) => {
		state.tips = text;
	};

	function submit() {
		uFormRef.value.validate().then(valid => {
			if (valid) {
				changePassword();
			}
		}).catch(() => {
			// 处理验证错误  
			uni.$u.toast('校验错误');
		});
	}

	function changePassword() {
		request.post("userinfo/setPayPassword", state.form).then(res => {
				util.showTip(res.msg);
			})
			.catch(err => {
				util.showTip(err.msg);
			})
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		type,
		loading,
		form,
		tips,
		seconds,
		rules,
	} = toRefs(state);
</script>

<style lang="scss">
	page {
		background-color: $u-bg-reverse-color;
	}

	.change-password {
		padding: $m32;

		.btn {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			background: linear-gradient(to right, #125cd7, #279dfa);
			color: #fff;
			text-align: center;
		}
	}
</style>